import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController, ToastController } from 'ionic-angular';

/**
 * Generated class for the DemoAlertPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-demo-alert',
  templateUrl: 'demo-alert.html',
})
export class DemoAlertPage {

  constructor(public navCtrl: NavController, public navParams: NavParams, private alCtl: AlertController,private tsCtl:ToastController) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad DemoAlertPage');
  }
  // toast
  showToast=(msg)=>{
    this.tsCtl.create({
      message:msg,
      duration:2000,
      cssClass:"custToast"
    }).present();
  }

  show_alert() {
    let tal = this.alCtl.create({
      title: "hello alert",
      subTitle: "subtitle",
      buttons: ['确认']
    });
    tal.present();
  }

  show_confirm() {
    this.c_confirm("hello confirm！", "Are you Sure?", 
    () => {
      // console.log('confirm ok');
      this.showToast('confirm ok');
    })
  }

  // 二次封装
  c_confirm(msg1, submsg?, funok?, funcanl?){
    let tal = this.alCtl.create({
      title: msg1,
      subTitle: submsg,
      buttons: [{
        text: '确认',
        handler: funok
      },{
        text: '取消',
        role: 'cancel',
        handler: funcanl
      }]
    });
    tal.present();
  }

  show_prompt() {
    let tal = this.alCtl.create({
      title: "login prompt",
      inputs: [
        {
          name: "username",
          placeholder: "account",
          type: "text"
        },
        {
          name: "password",
          placeholder: "psw",
          type: "password"
        }
      ],
      buttons: [{
        text: '取消',
        role: 'cancle',
        handler: () => {
          this.showToast('cancle login');
        }
      }, {
        text: '登陆',
        handler: (data) => {
          // console.log('login account:' + data.username + '  psw:' + data.password);
          this.showToast('login account:' + data.username + '  psw:' + data.password);
        }
      }]
    });
    tal.present();
  }

  show_radioAl() {
    let inputlist = [];
    for(let i=0;i<4;i++){
      let option = {
        id:i,
        label:"选项"+(i+1),
        value:"opt_"+i,
        type:"radio",
        checked: false
      }
      inputlist.push(option)
    }
    let tal = this.alCtl.create({
      title: "login prompt",
      inputs: inputlist,
      buttons: [{
        text: '取消',
        role: 'cancle',
        handler: () => {
          this.showToast('cancle select');
        }
      }, {
        text: '确认',
        handler: (data) => {
          // console.log('login account:' + data.username + '  psw:' + data.password);
          this.showToast(JSON.stringify(data));
        }
      }]
    });
    tal.present();

  }

   inputlist = [];

  show_checkAL() {
    if(this.inputlist.length==0)
    for(let i=0;i<4;i++){
      let option = {
        id:i,
        label:"选项"+(i+1),
        value:"opt_"+i,
        type:"checkbox",
        checked: false
      }
      this.inputlist.push(option)
    }
    let tal = this.alCtl.create({
      title: "login prompt",
      inputs: this.inputlist,
      buttons: [{
        text: '取消',
        role: 'cancle',
        handler: () => {
          this.showToast('cancle select');
        }
      }, {
        text: '确认',
        handler: (data) => {
          // console.log('login account:' + data.username + '  psw:' + data.password);
          this.showToast(JSON.stringify(data));
        }
      }]
    });
    tal.present();
  }
}
